<template>
  <div class="tablePart">
    <div>
      <table class="table sort-table">
        <tr>
          <th>
            <div>节点名称</div>
          </th>
          <template v-for="(item,idx) in tableDate">
            <th :key="idx" :style="{width: idx == tableDate.length-1 ? '' : item.length +'px'}">
              <!-- <div>{{item.name}}</div> -->
              <a-tooltip :title="item.name">
                <div>{{item.name}}</div>
              </a-tooltip>
            </th>
          </template>
        </tr>
        <tr>
          <td>项目数(个)</td>
          <template v-for="(item,idx) in tableDate">
            <td :key="idx">
              <div>{{item.value}}</div>
            </td>
          </template>
        </tr>
        <tr>
          <td>占比</td>
          <template v-for="(item,idx) in tableDate">
            <td :key="idx">
              <div>{{item.percent}}</div>
            </td>
          </template>
        </tr>
      </table>
    </div>
    <div id="fix-column">
      <table class="table sort-table" >
        <tr>
          <th>节点名称</th>
          <template v-for="(item,idx) in tableDate">
            <th :key="idx" :style="{width: idx == tableDate.length-1 ? '' : item.length +'px'}">
              <div>{{item.name}}</div>
            </th>
          </template>
        </tr>
        <tr>
          <td>项目数(个)</td>
          <template v-for="(item,idx) in tableDate">
            <td :key="idx">
              <div>{{item.value}}</div>
            </td>
          </template>
        </tr>
        <tr>
          <td>占比</td>
          <template v-for="(item,idx) in tableDate">
            <td :key="idx">
              <div>{{item.percent}}</div>
            </td>
          </template>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tableDate: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
}
</script>
<style lang="less" scoped>
table{
  table-layout: fixed;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: 'tnum';
  position: relative;
  clear: both;
  width: 100%;
  white-space: nowrap;
  tr {
    height: 36px;
  }
}
table,tr,th,td {
  text-align: left;
  padding-left: 20px;
  border-bottom: 1px solid #ececec;
  &:nth-child(1) {
    border-top: 1px solid #ececec;
  }
}
table th:nth-child(1),
table  tr td:nth-child(1) {
  background: #f6f6f6;
  width: 150px;
  font-weight: 600;
}
.tablePart {
  margin: 0 20px;
  position: relative;
  // overflow-x: auto;
  &>div {
    overflow: auto;
  }
  #fix-column {
    width: 150px;
    overflow: hidden;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
  }
}


</style>